<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言墙</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container{
            width:100%;
        }
        h1{
            text-align: center;
            margin: 20px 0;
            color: rgb(119, 142, 124);
        }
        p{
            text-align: center;
            padding: 10px 0;
            font-size: 12px;
            color: rgb(107, 107, 107);
        }
        .row{
            width: 270px;
            height: 30px;
            margin: 3px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 70px;
        }
        .row input{
            width: 200px;
            height: 25px;
            color: rgb(232, 131, 87);
            line-height: 20px;
            text-indent: 0.5em;
            /* 去掉轮廓线 */
            outline: none;
        }
        .row #submit{
            width: 200px;
            margin-left: 70px;
            height: 25px;
            font-size: 16px;
            line-height: 20px;
            background-color: rgb(193, 226, 203);
            border: none;
            outline: none;
            border-radius: 5px;
        }
        .row #submit:active{
            background-color: rgb(119, 142, 124);
        }
    </style>

    <div class="container">
        <h1>留言墙</h1>
        <p>输入后点击提交,会将信息显示在表格中</p>
        <div class="row">
            <span>发送方: </span>
            <input type="text" id="from">
        </div>
        <div class="row">
            <span>接收方: </span>
            <input type="text" id="to">
        </div>
        <div class="row">
            <span>内容: </span>
            <input type="text" id="content">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        let submit = document.querySelector("#submit");
        submit.onclick = function () {
            let from = document.querySelector("#from");
            let to = document.querySelector("#to");
            let content = document.querySelector("#content");

            if(from == '' || to == '' || content == ''){
                alert("发送方/接收方/内容 不能为空!")
                // 用户还没写完
                return;
            }
            let message = {
                from: from.value,
                to: to.value,
                content: content.value
            }
            // 清空输入框的数据
            from.value = '';
            to.value = '';
            content.value = '';
            $.ajax({
                type: 'post',
                url: 'messageWall',
                data: JSON.stringify(message),
                success: function () {
                    alert("消息提交成功!");
                    let container = document.querySelector(".container");
                    let div = document.createElement('div');
                    div.innerHTML = message.from + '对' + message.to + '说: ' + message.content;
                    div.className = 'row';
                    container.appendChild(div);
                }
            })
        }
        $.ajax({
            type: 'get',
            url: 'messageWall',
            success: function (body) {
                let container = document.querySelector(".container");
                for (let message of body){
                    let div = document.createElement('div');
                    div.innerHTML = message.from + '对' + message.to + '说: ' + message.content;
                    div.className = 'row';
                    container.appendChild(div);
                }
            }
        })
    </script>
</body>
</html>